<!-- 模板 -->
<template>
    <div class="app__body" :class="{'app__body--show': isRunAnimation}" v-if="isShowPage">
        <div class="app__header">
            <label>指如疾风，势如闪电</label>
        </div>
        <div class="main" v-if="ownPrizeInfo">
            <div class="main__wuwuwu">
                <img :src="aliyun + currentActivityInfo.current.carImgs[0]" v-if="currentActivityInfo && currentActivityInfo.current">
            </div>
            <div class="main__tip">
                <div class="main__tip__timecon">
                    <h3>秒杀手速</h3>
                    <div class="main__tip__timecon__time">
                        <span>{{ ownPrizeInfo.useTime }}<em>秒</em></span>
                    </div>
                </div>
                <div class="line"></div>
                <div class="main__tip__userinfo">
                    <div class="main__tip__userinfo__head">
                        <span></span>
                        <img :src="ownPrizeInfo.headimgurl">
                    </div>
                    <h2>恭喜你，手速王</h2>
                    <p>你的手速超过了{{ ownPrizeInfo.exceedNum || 100 }}人，请保持电话畅通<br>我们的客服会很快和你取得联系</p>                   
                </div>
                <div class="btn">
                    <a href="javascript:;" class="app-btn app-btn--xuanyao" @click="showSharePop">炫耀一下</a>
                </div>
            </div>
        </div>
    </div>
</template>


<!-- js -->
<script>
    import { DB } from '../config/db.js';

    export default{
        data(){
            return{
                isRunAnimation: 0,
                aliyun: DB.aliyundomain,
                ownPrizeInfo: ''
            }
        },
        computed: {
            // ownPrizeInfo(){
            //     return this.$store.state.ownPrizeInfo;
            // },
            currentActivityInfo(){
                return this.$store.state.currentActivityInfo;

            },
            // 显示页面  等store获取数据之后才能
            isShowPage(){
                return this.$store.state.currentActivityInfo.cityCode? true: false 
            }
        },
        methods: {
            showSharePop(){
                this.$store.commit("showShareWinnerPop", true);
            },
            getData(){
                return this.$http.get(DB.ip + 'activity/'+ this.$route.query.id +'/join', {
                    params: {
                        openid: this.$route.query.openid
                    }
                }).then((res) => {
                    if(res.data.resCode == '000000'){
                        this.ownPrizeInfo = res.data.data;
                    }else{  
                        this.$aui.toast.show(res.data.resMsg);
                    }
                }, (error) => {
                    this.$aui.toast.show('系统错误，错误代码：' + error.status)
                });
            }
        },
        mounted(){
            this.$aui.loading.hide();
            
            setTimeout(() => {
                this.isRunAnimation = 1;
            }, 1000);

            if(this.$store.state.ownPrizeInfo){
                this.getData();
            }
        }
    }
</script>

<!-- scss -->
<style scoped lang="scss">
    @import "../styles/common/config.scss";
    .app__body {
        @include absWin;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #2683e5;
        &--show{
            .app__header{
                transform: perspective(400px) rotateX(0);
            }
        }
        color: #fff;
    }
    .app__header{
        width: 100%;
        height: 1.2rem;
        background-color: #1a5695;
        border-radius: 0 0 22px 22px;
        position: relative;
        top: 0;
        left: 0;
        z-index: 9;
        transform: perspective(400px) rotateX(-90deg);
        transition: transform 0.8s cubic-bezier(.165,.84,.44,1);
        transform-origin: 50% 0;
        font-size: 0.40rem;
        text-align: center;
        line-height: 1.2rem;
        font-weight: bold;
        @include flexbox;
        @include flexCenterHori;
        @include flexCenterVeri;
        label{
            // padding: 0 0.2rem;
        }
        &:before{
            width: 1.5rem;
            height: 0.04rem;
            content: "";
            background: url("../assets/images/line_rule_shadow.png") 0 0 no-repeat;
            background-size: 1.5rem 0.04rem;
        }
        &:after{
            width: 1.5rem;
            height: 0.04rem;
            content: "";
            background: url("../assets/images/line_rule_shadow.png") 100% 0 no-repeat;
            background-size: 1.5rem 0.04rem;
            transform: rotate(180deg);
            margin-top: 2px;
        }
    }
    .main{
        // @include absWin;
        @include flexbox;
        @include flexboxVertical;
        margin-top: -1.2rem;
        @at-root &__wuwuwu{
            width: 100%;
            height: 5rem;
            img{
                display: block;
                width: 100%;
            }
        }
        @at-root &__tip{
            width: 100%;
            @include flexAuto;
            background: url("../assets/images/activity_info_bg.png") 50% 0 no-repeat;
            background-size: 100% auto;
            margin-top: -1rem;
            position: relative;
            min-height: 6rem;
            padding-top: 1rem;
            color: #fff;
            .btn{
                padding: 0.5rem 1.0rem;
            }
            @at-root &__timecon{
                position: relative;
                >h3{
                    font-size: 0.38rem;
                    text-align: center;
                    line-height: 0.5rem;
                    font-weight: bold;
                    margin-bottom: 0.1rem;
                }
                
                &__time{
                    width: 100%;
                    height: 0.8rem;
                    position: relative;
                    background: url("../assets/images/x.png") 50% 0 no-repeat;
                    background-size: 100%;
                    @include flexbox;
                    @include flexCenterHori;
                    @include flexCenterVeri;
                    >span{
                        display: block;
                        height: 0.66rem;
                        padding: 0 0.1rem;
                        min-width: 1.8rem;
                        line-height: 0.66rem;
                        text-align: center;
                        font-family: "Let's go Digital";
                        font-size: 0.6rem;
                        background-color: rgb(0, 0, 0);
                        border-radius: 0.33rem;
                        em{
                            font-size: 0.28rem;
                            padding-left: 0.1rem;
                        }
                    }
                }
            }
            .line{
                width: 100%;
                height: 2px;
                margin-top: 0.28rem;
                margin-bottom: 0.2rem;
                background: url(path("line_shadow.png")) 50% 100% no-repeat;
                background-size: 270px 2px;
            }
            
            @at-root &__userinfo{
                background: url(path("flower.png")) 50% no-repeat;
                background-size: 6.4rem;
                &__head{
                    width: 100%;
                    padding-top: 0.6rem;
                    position: relative;
                    margin: 0 auto;
                    width: 1.2rem;
                    >span{
                        width: 1.2rem;
                        height: 1rem;
                        background: url(path("wangguan.png")) 50% no-repeat;
                        background-size: 1.2rem 1.0rem;
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0.05rem
                    }
                    img{
                        width: 1.2rem;
                        display: block;
                        border-radius: 50%;
                        position: relative;
                        z-index: 9;
                        height: 1.2rem;
                    }
                }

                >h2{
                    font-size: 0.48rem;
                    line-height: 0.6rem;
                    margin-top: 0.1rem;
                    margin-bottom: 0.2rem;
                    font-weight: bold;
                    text-align: center;
                }
                p{
                    font-size: 0.25rem;
                    color: #fefefe;
                    text-align: center;
                }
            }
        }
    }
</style>
